<template>
    <div class="page-top-half">
      <div class="left-panel">
        <div class="panel-half" style="height: 60%">
          <tsgz @click.native="warn_rate_table"></tsgz>
        </div>
        <div class="panel-half" style="height: calc(40% - 10px)">
          <warningNum></warningNum>
<!--          <gyfb @click.native="vip_warn_table"></gyfb>-->
        </div>
      </div>
      <div class="center-panel">
        <div class="num-wrap">
          <div class="item" data-label="全年预警总数">
            <span>{{indexNums.yearWarnNum}}</span>
          </div>
          <div class="item" data-label="今日预警数">
            <span>{{indexNums.dayWarnNum}}</span>
          </div>
          <div class="item" data-label="见面数">
            <span>{{indexNums.meetNum}}</span>
          </div>
          <div class="item" data-label="拦截数">
            <span>{{indexNums.interceptNum}}</span>
          </div>
        </div>
        <echarts-Map ></echarts-Map>
      </div>
      <div class="right-panel"  :style="{background: `rgba(5,22,47,0.56)`, width: '25%', cursor: 'pointer', border: '1px solid #042d55'}">
<!--        <el-button type="primary" size="mini" style="position: absolute; right: 5px; top: 5px;" @click.stop="changeFlag=!changeFlag" circle>-->
<!--          <i class="el-icon-refresh"></i>-->
<!--        </el-button>-->
<!--        <div class="col" v-show="changeFlag">-->
<!--          <jianmian></jianmian>-->
<!--        </div>-->
<!--        <div class="col" v-show="!changeFlag">-->
<!--          <beipian></beipian>-->
<!--        </div>-->
        <div class="col">
          <receivedStat></receivedStat>
<!--          <cal @click.native="case_table"></cal>-->
        </div>
        <div class="col">
          <pcs></pcs>
        </div>
      </div>
      <div class="table-panel" style="display: flex;gap: 10px;">
        <xxx style="width: 20%" @click.native="jumptoInterceptHandle"></xxx>
        <bottomTable style="width: 67%"></bottomTable>
        <person style="width: 11%" @click.native="vip_label_table"></person>
        <!--        <bottomTable2 style="width: 27%"></bottomTable2>-->
      </div>
      <common-Dialog ref="modifyPW_dialog" :customClass="'pw-dialog'">
        <template v-slot:content>
          <common-Form
              :fieldsList="dialogfieldsList"
              ref="tableForm"
              :hideTable="true"
              :hidePagination="true"
              @change="pwFormChange"
          >

          </common-Form>
        </template>
        <template v-slot:footer>
          <div style="padding: 10px;">
            <span class="pw-comfirm-text" v-show="pwComfirm">两次输入的密码不一致</span>
            <el-button type="primary" @click.stop="editSubmit">修改</el-button>
          </div>
        </template>
      </common-Dialog>
      <common-Dialog ref="warn_rate_table" :customClass="'warn_rate_table-dialog'">
        <template v-slot:content>
          <common-Form
              :fieldsList="aaaField"
              :hideTable="false"
              :table-head="warnRateHead"
              :hidePagination="false"
              ref="edit_tableForm"
              :defaultData="warnRateList"
          >
          </common-Form>
        </template>
        <template v-slot:footer>
          <div style="padding: 0px;">
            <el-button type="primary" @click.stop="closeEditDialog">关闭</el-button>
          </div>
        </template>
      </common-Dialog>

      <common-Dialog ref="Vip_label_table" :customClass="'Vip_label_table-dialog'">
        <template v-slot:content>
          <common-Form
              :fieldsList="aaaField"
              :hideTable="false"
              :table-head="vipLabelHead"
              :hidePagination="false"
              ref="edit_tableForm"
              :defaultData="vipLabelList"
          >
          </common-Form>
        </template>
        <template v-slot:footer>
          <div style="padding: 0px;">
            <el-button type="primary" @click.stop="closeVipLabelDialog">关闭</el-button>
          </div>
        </template>
      </common-Dialog>

      <common-Dialog ref="Vip_warn_table" :customClass="'Vip_warn_table-dialog'">
        <template v-slot:content>
          <common-Form
              :fieldsList="aaaField"
              :hideTable="false"
              :table-head="VipWarnHead"
              :hidePagination="false"
              ref="edit_tableForm"
              :defaultData="vipWarnList"
          >
          </common-Form>
        </template>
        <template v-slot:footer>
          <div style="padding: 0px;">
            <el-button type="primary" @click.stop="closeVipDialog">关闭</el-button>
          </div>
        </template>
      </common-Dialog>

      <common-Dialog ref="Case_table" :customClass="'Case_table-dialog'">
        <template v-slot:content>
          <common-Form
              :fieldsList="aaaField"
              :hideTable="false"
              :table-head="caseHead"
              :hidePagination="false"
              ref="edit_tableForm"
              :defaultData="caseList"
          >
          </common-Form>
        </template>
        <template v-slot:footer>
          <div style="padding: 0px;">
            <el-button type="primary" @click.stop="closeCaseDialog">关闭</el-button>
          </div>
        </template>
      </common-Dialog>

      <common-Dialog ref="Intercept_table" :customClass="'Intercept_table-dialog'">
        <template v-slot:content>
          <common-Form
              :fieldsList="aaaField"
              :hideTable="false"
              :table-head="interceptHead"
              :hidePagination="false"
              ref="edit_tableForm"
              :defaultData="interceptList"
          >
          </common-Form>
        </template>
        <template v-slot:footer>
          <div style="padding: 0px;">
            <el-button type="primary" @click.stop="closeInterceptDialog">关闭</el-button>
          </div>
        </template>
      </common-Dialog>

    </div>
</template>

<script>
// @ is an alias to /src
import commonDialog from '@/components/commonDialog/common.dialog'
import commonForm from '@/components/commonForm/commonForm.component'
import xxx from '@/components/bottom/xxx.component'
import person from '@/components/bottom/person.component'
import bottomTable from '@/components/bottom/bottomTable.component'
import bottomTable2 from '@/components/bottom/bottomTable2.component'
import echartsMap from '@/components/center/echartsMap'
import tsgz from '@/components/left/tsgz.component'
import gyfb from '@/components/left/gyfb.component'
import warningNum from '@/components/left/warningNum.component'
import jianmian from '@/components/right/jianmian.component'
import beipian from '@/components/right/beipian.component'
import receivedStat from '@/components/right/receivedStat.component'
import cal from '@/components/right/cal.component'
import pcs from '@/components/right/pcs.component'

import Vue from 'vue'
import api from "@/api/common.api";
import loginApi from "@/api/login.api";
import _ from 'lodash'
import API from "@/api/index.api";

export default {
  name: 'Home',
  components: {
    commonDialog,
    commonForm,
    bottomTable,
   /* bottomTable2,*/
    echartsMap,
    tsgz,
    // gyfb,
    warningNum,
    // jianmian,
    // beipian,
    pcs,
    receivedStat,
    // cal,
    person,
    xxx,
  },
  data () {
      return {
        indexNums: {},
        changeFlag: true,
        defaultData: [
          {
            '111': '反诈中心',
            '1112': '18326521220',
            '11122': '林丽柳',
            '111223': '拦截',
            '1112233': '2024-02-15 08：30：56',
            '11122334': '互联网  ',
          },
          {
            '111': '反诈中心',
            '1112': '18726521260',
            '11122': '赵磊',
            '111223': '拦截',
            '1112233': '2024-02-15 08：30：56',
            '11122334': '互联网  ',
          },
          {
            '111': '反诈中心',
            '1112': '17726521260',
            '11122': '李芬',
            '111223': '拦截',
            '1112233': '2024-02-15 08：30：56',
            '11122334': '互联网  ',
          },
          {
            '111': '反诈中心',
            '1112': '15026521160',
            '11122': '凯利',
            '111223': '拦截',
            '1112233': '2024-02-15 08：30：56',
            '11122334': '互联网  ',
          },
          {
            '111': '反诈中心',
            '1112': '13326521160',
            '11122': '刘照坤',
            '111223': '拦截',
            '1112233': '2024-02-15 08：30：56',
            '11122334': '互联网  ',
          },
          {
            '111': '反诈中心',
            '1112': '18326521220',
            '11122': '林丽柳',
            '111223': '拦截',
            '1112233': '2024-02-15 08：30：56',
            '11122334': '互联网  ',
          },
          {
            '111': '反诈中心',
            '1112': '18726521260',
            '11122': '赵磊',
            '111223': '拦截',
            '1112233': '2024-02-15 08：30：56',
            '11122334': '互联网  ',
          },
          {
            '111': '反诈中心',
            '1112': '17726521260',
            '11122': '李芬',
            '111223': '拦截',
            '1112233': '2024-02-15 08：30：56',
            '11122334': '互联网  ',
          },
          {
            '111': '反诈中心',
            '1112': '15026521160',
            '11122': '凯利',
            '111223': '拦截',
            '1112233': '2024-02-15 08：30：56',
            '11122334': '互联网  ',
          },
          {
            '111': '反诈中心',
            '1112': '13326521160',
            '11122': '刘照坤',
            '111223': '拦截',
            '1112233': '2024-02-15 08：30：56',
            '11122334': '互联网  ',
          },
        ],
        warnRateHead:[
          {
            prop: 'station',
            label: '下发部门'
          },
          {
            prop: 'phonenum',
            label: '下发号码'
          },
          {
            prop: 'name',
            label: '下发姓名'
          },
          {
            prop: 'type',
            label: '下发类型'
          },
          {
            prop: 'warn_time',
            label: '下发时间',
            width: 200
          },
          {
            prop: 'data_source',
            label: '数据类型'
          },
        ],
        VipWarnHead:[
          {
            prop: 'station',
            label: '下发部门'
          },
          {
            prop: 'phonenum',
            label: '下发号码'
          },
          {
            prop: 'name',
            label: '下发姓名'
          },
          {
            prop: 'type',
            label: '下发类型'
          },{
            prop: 'vipType',
            label: '重点类型'
          },
          {
            prop: 'warn_time',
            label: '下发时间',
            width: 200
          },
          {
            prop: 'data_source',
            label: '数据类型'
          },
        ],
        vipLabelHead:[
          {
            prop: 'name',
            label: '姓名'
          },
          {
            prop: 'phonenum',
            label: '手机号'
          },
          {
            prop: 'idcard',
            label: '身份证'
          },
          {
            prop: 'age',
            label: '年龄'
          },{
            prop: 'job',
            label: '职业'
          },
          {
            prop: 'address',
            label: '住址'
          },
          {
            prop: 'type',
            label: '中标模型'
          },
        ],
        caseHead:[
          {
            prop: 'receive_station',
            label: '派出所'
          },
          {
            prop: 'case_type',
            label: '涉案类型',
            width: 90
          },
          {
            prop: 'receive_time',
            label: '接报时间',
            width: 180
          },
          {
            prop: 'person_name',
            label: '报警人'
          },
          {
            prop: 'monies',
            label: '金额'
          },
        ],
        interceptHead:[
          {
            prop: 'url',
            label: '域名'
          },
          {
            prop: 'type',
            label: '类型'
          },
          {
            prop: 'num',
            label: '拦截次数'
          }
        ],
        aaaField: [],
        warnRateList: [],
        vipWarnList: [],
        caseList: [],
        interceptList: [{
          'url': 'app.3b5bet.com',
          'type': '贷款',
          'num': '17'
        },{
          'url': 'app.aw.honeychat.c.com',
          'type': '裸聊',
          'num': '30'
        },{
          'url': '47.122.59.226:443',
          'type': '投资',
          'num': '26'
        },{
          'url': 'bczb.gz.gjhfngb.com',
          'type': '刷单',
          'num': '40'
        }
        ],
        vipLabelList: [{
          'name': '**',
          'phonenum': '******',
          'idcard': '******',
          'age': '65',
          'job': '退休',
          'address': '上海市普陀区长寿路***',
          'type': '退休人员',
        },{
          'name': '**',
          'phonenum': '******',
          'idcard': '******',
          'age': '20',
          'job': '大学生',
          'address': '上海市普陀区长寿路***',
          'type': '在校大学生',
        },{
          'name': '**',
          'phonenum': '******',
          'idcard': '******',
          'age': '36',
          'job': '全职太太',
          'address': '上海市普陀区长寿路***',
          'type': '家庭主妇',
        },{
          'name': '**',
          'phonenum': '******',
          'idcard': '******',
          'age': '48',
          'job': '财务主管',
          'address': '上海市普陀区长寿路***',
          'type': '财务',
        },
        ],
        pwComfirm: false,
        statementShow: false,
        markerList: [],
        dialogTableHead: [
              {
                  prop: 'alarmTime',
                  label: '日期',
                  width: 160
              },
          ],
        dialogfieldsList: [
            {
                type: 'text',
                code: 'oldPass',
                name: '原密码',
                password: true,
                placeholder: '请输入原密码',
            },
            {
                type: 'text',
                code: 'newPass',
                name: '新密码',
                password: true,
                placeholder: '请输入新密码',
            },
            {
                type: 'text',
                code: 'comfirmPW',
                name: '确认密码',
                password: true,
                placeholder: '请确认新密码',
            },
        ],
      }
  },
  methods: {
      closeEditDialog () {
        this.$refs.warn_rate_table.close();
      },
    closeVipDialog () {
        this.$refs.Vip_warn_table.close();
      },
    closeVipLabelDialog () {
        this.$refs.Vip_label_table.close();
      },
    closeCaseDialog () {
        this.$refs.Case_table.close();
      },
    closeInterceptDialog () {
        this.$refs.Intercept_table.close();
      },
      edit_first_table () {
        this.$refs.edit_first_table.open({title: '详情', width: '60%'})
        this.$nextTick(()=>{
          this.$refs.edit_first_table.getTableData({}, [
            {
              bhrhm: '被害人号码',
              xm: '姓名',
              zplx: '诈骗类型',
              cjrdw: '出警人单位',
              pjsj: '派警时间',
              lxsj: '联系时间',
            }
          ])
        })
      },
    warn_rate_table () {



            this.$nextTick(()=>{
              API.warn_person().then(res=>{

                let warnData=res.content


                this.$refs.warn_rate_table.open({title: '详情', width: '60%'})

                this.warnRateList=warnData;

            //this.$refs.warn_rate_table.getTableData({}, warnData)

          })
        })
      },
    case_table () {

            this.$nextTick(()=>{
              API.case_list().then(res=>{

                let caseData=res.content

                this.$refs.Case_table.open({title: '详情', width: '60%'})

                this.caseList=caseData;

            //this.$refs.warn_rate_table.getTableData({}, warnData)

          })
        })
      },
    vip_warn_table () {



      this.$nextTick(()=>{
        API.warn_person().then(res=>{

          let warnData=res.content


          this.$refs.Vip_warn_table.open({title: '详情', width: '60%'})

          this.vipWarnList=warnData;

          //this.$refs.warn_rate_table.getTableData({}, warnData)

        })
      })
    },

    vip_label_table () {


      this.$nextTick(()=>{



          this.$refs.Vip_label_table.open({title: '详情', width: '60%'})


      })
    },
    jumptoInterceptHandle () {
      this.$router.push({name: 'interceptList'})

    },
    intercept_table () {


      this.$nextTick(()=>{



          this.$refs.Intercept_table.open({title: '详情', width: '60%'})


      })
    },
      pwFormChange (e) {
        this.pwComfirm = false
        if(e.newPass !== e.comfirmPW && e.comfirmPW){
          this.pwComfirm = true
        }
      },
      editSubmit () {
        let form = _.clone(this.$refs.tableForm.form)
        this.pwFormChange(form)
        if(!form.comfirmPW || !form.oldPass || !form.newPass){
            return
        }
        if(form.comfirmPW !== form.newPass){
            return
        }
        delete form.comfirmPW
        loginApi.updatePass(form).then(res=>{
            if(res.msgCode === '200'){
                this.$message({
                    type: 'success',
                    message: '修改成功'
                });
                this.logout()
            }else{
                this.$message({
                    type: 'warning',
                    message: res.msgContent
                });
            }
        })
      },
      changePW () {
          this.$refs.modifyPW_dialog.open({title: '修改密码', width: '40%'})
      },
      logout () {
          this.$store.commit('logOut')
          this.$router.push({name: 'login'})
      },
      closeHandle(){
          this.statementShow = false
      },
      getJyzToMap () {
        api.getJyzToMap().then(res=>{
          res.content.forEach(v=>{
            this.addGasStationPoint(v)
          })
        })

      },
      jumpTo(){
        window.location = 'http://15.211.20.4:8089/model/#/'
      },
      drawPoint (list) {
        this.markerList.forEach(v=>{
          this.removePoint(v)
        })
        list.forEach(v=>{
          this.addPoint(v)
        })
        this.$refs.Lmap.setView([list[list.length - 1].wd,list[list.length - 1].jd], 16)
      },
      removePoint (point) {
          this.$refs.Lmap.removeLayer(point)
      },
      createDom (div) {
        var Profile = Vue.extend({
          template: div,
          data: function () {
            return {
              firstName: 'Walter',
              lastName: 'White',
              alias: 'Heisenberg'
            }
          },
          methods:{
            aaa(){

            }
          }
        })
        let dom = new Profile().$mount()
        return dom
      },
      addGasStationPoint (e) {
        if(!e){
          return false
        }
        let div = `<div class="capture-pop-wrap">
                          <div class="capture-pop-title">加油站</div>
                          <div class="capture-pop-item"><span>管理单位：</span>${e.GLDW}</div>
                          <div class="capture-pop-item"><span>场所名称：</span>${e.CSMC}</div>
                        </div>`
        // 创建 Profile 实例，并挂载到一个元素上。
        let dom = this.createDom(div)
        let point = {
          latlng: {lat: e.WD, lng: e.JD},
          dom: dom.$el
        }
        let icon = require('/src/assets/img/mapImg/gas_station.png')
        this.$refs.Lmap.addMarker(point, icon)
      },
      addPoint (e) {
        if(!e){
          return false
        }
        this.markerList.forEach(v=>{
          this.removePoint(v)
        })
        let div = `<div class="capture-pop-wrap">
                          <div class="capture-pop-title">抓拍信息</div>
                          <div class="capture-pop-item"><span>抓拍时间：</span>${e.passTime}</div>
                          <div class="capture-pop-item"><span>加油站：</span>${e.sbmc}</div>
                          <div class="capture-pop-item"><span>车牌号：</span>${e.plateNo}</div>
                          <div class="capture-pop-item"><span>抓拍照片：</span><img class="captrue-car-img" src="${e.sceneImg}" alt=""></div>
                        </div>`
        // 创建 Profile 实例，并挂载到一个元素上。
        let dom = this.createDom(div)
        let point = {
            latlng: {lat: e.wd, lng: e.jd},
            dom: dom.$el,
            zIndexOffset: 999
        }
        this.markerList.push(this.$refs.Lmap.addMarker(point))
      },
      getNums () {
        API.index_countNum().then(res=>{
          this.indexNums = res.content
          this.indexNums.dayWarnNum = this.indexNums.dayWarnNum === '0' ?  '11' : this.indexNums.dayWarnNum
          this.indexNums.meetNum = this.indexNums.meetNum === '0' ?  '19' : this.indexNums.meetNum
        })
      }
  },
  mounted () {
    this.getNums()
    // this.getJyzToMap()
    // {lat: 31.096331315335608, lng: 121.2143898010254}
  }
}
</script>
<style lang="stylus">
  .index {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #000;
  }

  .index::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
      linear-gradient(45deg, rgba(0, 255, 255, 0.1) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(0, 255, 255, 0.1) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(0, 255, 255, 0.1) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(0, 255, 255, 0.1) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    animation: gridMove 20s linear infinite;
    opacity: 0.3;
  }

  .index::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
    pointer-events: none;
  }

  @keyframes gridMove {
    0% {
      background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    }
    100% {
      background-position: 20px 0, 20px 10px, 30px -10px, 10px 0px;
    }
  }

  .index-content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .center-panel {
    position: relative;
  }
  .num-wrap {
    width: 90%;
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 15px 0;
    margin-bottom: 10px;
    background: rgba(5, 22, 47, 0.3);
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.2);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    .item {
      position: relative;
      padding: 15px 25px;
      text-align: center;
      background: linear-gradient(135deg, rgba(0, 123, 255, 0.1), rgba(0, 217, 255, 0.05));
      border-radius: 6px;
      border: 1px solid rgba(0, 217, 255, 0.3);
      width: 25%;
      white-space: nowrap;
      // 标题文字样式
      &::before {
        content: attr(data-label);
        display: block;
        font-size: 40px;
        color: #fff;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 1px;
        white-space: nowrap;
      }

      // 数字样式
      span {
        display: inline-block;
        font-size: 40px;
        font-weight: bold;
        color: #00d9ff;
        text-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
        background: linear-gradient(to bottom, #fff, #a0d8ff);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      // 悬浮效果
      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 20px rgba(0, 217, 255, 0.3);
        transition: all 0.3s ease;
      }

      // 每个item的独特边框色
      &:nth-child(1) { border-color: rgba(0, 217, 255, 0.5); }
      &:nth-child(2) { border-color: rgba(0, 255, 191, 0.5); }
      &:nth-child(3) { border-color: rgba(255, 196, 0, 0.5); }
      &:nth-child(4) { border-color: rgba(255, 90, 90, 0.5); }
    }
  }
  @media screen and (max-width: 1920px) {
    .num-wrap{
      width: 90%;
      padding: 0;
      .item {
        &::before {
          font-size: 12px!important;
        }
      }
      span {
        font-size: 20px!important;

      }
    }
  }
</style>